<template>
  <div>
    <vtour />
    <div class="years">
      <div class="years-main" ref="scroll">
        <div
          v-for="(item, index) in years"
          :class="{ seldiv: yearsIndex === index }"
          @click="setYears(index)"
        >
          {{ item }}
        </div>
      </div>
    </div>
    <div class="zs_nav_main">
      <div class="navsMain">
        <div
          class="zs_nav_li"
          v-for="(item, index) in navBar"
          :class="{ zs_nav_li_sel: index === navNum }"
          @click="navClick(index)"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
    <router-view />
  </div>
</template>

<script>
import Vtour from "components/content/vtour/Vtour.vue";
import {curUrl3} from 'util/prodUrl'
export default {
  components: { Vtour },
  data() {
    return {
      navBar: [
        {
          name: "扶贫成果",
          path: "/peoples",
        },
        {
          name: "基层党建",
          path: "/partyBuilding",
        },
        {
          name: "乡村展示",
          path: "/industry",
        },
      ],
      navNum: 0,
      currentName: "",
      pano: null,
      years: ["2019年", "2022年"],
      yearsIndex: 1,
      xmls: ["/tourold.xml","/tournew.xml"],
    };
  },
  mounted() {
    this.bus.$on("scene-click", (scene) => {
      this.receive(scene);
    });
    this.scrollNav()
  },
  created() {
    //this.currentName = JSON.parse(sessionStorage.getItem("pano")).name;
  },
  methods: {
    navClick(index) {
      this.navNum = index;
      this.$router.push("/main/ksy/ksyMain" + this.navBar[index].path);
    },
    // receive(spot) {
    //   this.currentName = spot.name;
    //   window.krpano.call("loadscene(" + spot.scene + ",null,MERGE,BLEND(1));");
    // },
    // setcurrent() {
    //   return this.$store.state.currentName == ""
    //     ? JSON.parse(sessionStorage.getItem("pano")).name
    //     : this.$store.state.currentName;
    // },
    isshowSel() {
      this.isshow = !this.isshow;
    },
    closeCurr() {
      this.isshow = false;
    },
    setYears(index) {
      this.yearsIndex = index;
      this.scrollNav();
      this.xml = curUrl3 + "/pano/ksh/1vr/hhlvr" + this.xmls[index];
      window.krpano.call("loadpanoscene("+this.xml +", scene_1___-____________, null,MERGE,BLEND(1))")
    },
    scrollNav() {
      this.$refs.scroll.scrollTo((this.yearsIndex * 135),0);
    }
  },
  beforeDestroy() {
    this.bus.$off("scene-click");
  },
};
</script>

<style lang="scss" scoped>
.zs_nav_main {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1rem;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  width: 109rem;
  height: 4.1875rem;
  background: url(~assets/img/ksh/selbg.png) no-repeat;
  background-position: center;
  background-size: 100% 100%;
  .navsMain {
    display: flex;
    .zs_nav_li {
      box-sizing: border-box;
      background: url(~assets/img/ksh/nav.png) no-repeat;
      background-size: 100% 100%;
      text-align: center;
      width: 6.5625rem;
      line-height: 2rem;
      margin: 0 0.3125rem;
      cursor: pointer;
    }
    .zs_nav_li:hover {
      background: url(~assets/img/ksh/nav_sel.png) no-repeat;
      background-size: 100% 100%;
    }
    .zs_nav_li_sel {
      background: url(~assets/img/ksh/nav_sel.png) no-repeat;
      background-size: 100% 100%;
    }
  }
}
.years {
  position: absolute;
  top: 5rem;
  left: 50%;
  width: 29.125rem;
  height: 4rem;
  margin-left: -14.5625rem;
  z-index: 1234;
  background: url(~assets/img/ksh/years.png) no-repeat;
  background-size: 100% 100%;
  padding: 0 3.125rem;
  .years-main {
    display: flex;
    align-items: center;
    overflow: hidden;
    width: 100%;
    height: 100%;
    padding: 0 6.25rem;
    div {
      font-family: "sycn";
      font-size: 1rem;
      color: #1cacdd;
      white-space: nowrap;
      padding: 0 2.5rem;
      text-align: center;
      transition: all .3s;
      cursor: pointer;
    }
    .seldiv {
      border: 0.125rem solid #24ceed;
      border-radius: 0.625rem;
      box-shadow: #1cacdd 0rem 0rem 0.625rem inset;
      font-size: 1.25rem;
      color: #fff;
    }
  }
}
</style>